<!--
 * @Author: Mcc
 * @Date: 2024-07-11 10:21:23
 * @LastEditors: mcc 550539422@qq.com
 * @LastEditTime: 2024-08-22 14:17:13
 * @FilePath: \ft-apply\src\view\train\meals.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by Mcc, All Rights Reserved. 
-->
<template>
  <div class="home" style='background: #f5f5f5;margin-top: 40px;'>
    <div class="header">
      <div class="box">
        <div>
          <img style="width: 180px;" src="../../assets/ui/img/applicationSuccess.png" alt="">
        </div>
        <h2 style="font-size:22px">约培成功！</h2>
        <div class="time">
          <div>参培时间：<br /><span>{{ timesShow[0] }}</span><span style="color: #000000;"> 至 </span><span>{{ timesShow[1]
              }}</span></div>
        </div>
        <div class="tips">
          每人仅允许选择一次参培时间，提交成功后无法自助修改。
          如确有修改需求，请将修改原因发送到ftzhaopin@fangtian.me邮箱说明， 或及时与对应HR沟通。
        </div>
      </div>
    </div>
    <div class="content" style='margin-top: 1vh;position: relative;'>
      <commonLayout>
        <h3>饮食调查</h3>
        <van-form @submit="onSubmit" rules='allRules' :scroll-to-error=true :validate-first=true>
          <van-cell-group inset>
            <van-field v-model="formData.joinTime" readonly name="picker" label="口味选择：" placeholder="点击选择"
              @click="localtaste == null ? showPicker = true : showPicker = false" right-icon='arrow-down'
              :rules="allRules.hots" />
            <van-popup v-model:show="showPicker" position="bottom">
              <van-picker :columns="columns" @confirm="onConfirm" @cancel="showPicker = false" />
            </van-popup>
            <van-field label="忌口食物：" readonly class="selfInput" />
            <van-field name="foods" :readonly="localnotEat != null" class="txtarea" v-model="formData.messages" rows="2"
              autosize type="textarea" maxlength="50" placeholder="请输入" show-word-limit />
          </van-cell-group>
          <div style="margin: 16px;">
            <van-button round block type="primary" native-type="submit"
              :disabled="localnotEat != null || localtaste != null ? true : false">
              确定
            </van-button>
          </div>
        </van-form>
      </commonLayout>
    </div>
  </div>

</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import commonLayout from '../../components/CommonLayout.vue';
import type { PickerOption } from 'vant';
import { showDialog, showToast } from 'vant';
import { useRouter, useRoute } from 'vue-router';
import { localUserinfo } from '../../assets/js/common';
const userInfo = localUserinfo();
const trainingTime = ref();
// 获取当前路由
const route = useRoute();
// 访问查询参数
const query = route.query;

const router = useRouter();
import apis from '../../api/index';
import { onMounted } from 'vue';
const { joinTrainingNumber, userIndexStatus } = apis;
const formData = ref({
  joinTime: '',
  messages: '',
});
const startTimes = ref("2024.06.25");
const endTimes = ref("2024.06.26");
const showPicker = ref(false);
const columns = [
  { text: '辣', value: 'hot' },
  { text: '不辣', value: 'NoHot' },
];
const loginValidator = (val: any, rule: any) => {
  return new Promise((resolve, reject) => {
    if (val === "") {
      showDialog({
        title: '温馨提示',
        message: rule.message,
      }).then(() => {
        return resolve(false);
      });
    } else {
      return resolve(true);
    }
  });
}
const allRules = reactive<any>({
  hots: [{ validator: loginValidator, message: '请选择口味' }]
});
const localnotEat = ref();
const localtaste = ref();
const timesShow = ref([])
onMounted(async () => {
  const response = await userIndexStatus({ userId: userInfo.userId });
  localStorage.setItem("clickStatus", JSON.stringify(response.data));
 
  const clickStatus = JSON.parse(localStorage.getItem('clickStatus'));

  // if (Number(query.pathUrl) != 1) {
  //   if (clickStatus.taste != null || clickStatus.notEat != null) {
  //     router.push("/");
  //   }
  // }
  startTimes.value = clickStatus.volunteerTime;
  endTimes.value = clickStatus.volunteerTime;

  formData.value.joinTime = clickStatus.taste;
  formData.value.messages = clickStatus.notEat;

  localnotEat.value = clickStatus.notEat;
  localtaste.value = clickStatus.taste;

  trainingTime.value = query.picker ? query.picker : clickStatus.trainingTime;
  //trainingTime.value = '2024-8-9至2024.9.8'
  timesShow.value = trainingTime.value.split("至");
  
});

const onConfirm = ({ selectedOptions }: PickerOption) => {
  formData.value.joinTime = selectedOptions[0]?.text;
  showPicker.value = false;
};
const onSubmit = async (values: any) => {
  const clickStatus = JSON.parse(localStorage.getItem('clickStatus') as string);
  const formdata = new FormData();
  

  formdata.append('trainingNumberId', clickStatus.trainingNumberId);
  formdata.append('resumesId', clickStatus.resumesId);
  formdata.append('taste', values.picker);
  formdata.append('notEat', values.foods);
  formdata.append('trainingUrl', null);
  formdata.append('editType', 1);
  const datas = await joinTrainingNumber(formdata);
  if (datas.code == '10000') {
    showToast('提交成功！');
    router.push('/train/index')
  } else {
    showToast(datas.msg);
  }
  //成功后跳回约培首页
};

</script>

<style lang="less" scoped>
:root {
  --van-button-primary-background: #79C5EF;
}

:deep(#app) {
  background: #fff !important;
}

:deep(.txtarea .van-field__body) {
  padding: 10px;
  background: #F5F7FB;
}

:deep(.txtarea) {
  margin-top: -14px;
}

.selfInput {
  &:after {
    border-bottom: none;
  }
}

.time {
  font-size: 18px;
  color: #333333;

  span {
    color: #209EE4;
  }
}

img {
  width: 100%;
}

:deep(.van-swipe__indicator) {
  background: rgba(32, 158, 228, 0.8);
  width: 10px;
  height: 10px;
}

:deep(#layout) {
  background: #fff;
  padding: 0;
  box-shadow: 0px 0 0 rgba(255, 255, 255, 1);
  border-radius: 20px 20px 0 0;
}

h3,
h2,
.tips {
  margin: 28px 20px 10px 0px;
  padding-left: 20px;
}

.tips {
  font-weight: 400;
  font-size: 16px;
  color: #B3C0C8;
  margin: 20px 20px 10px 0px;
  text-align: left;
  line-height: 28px;
}

.content {
  :deep(.van-button) {
    border-radius: 8px;
    background: #209EE4;
    border-radius: 10px 10px 10px 10px;
  }
}

.box {
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  padding-top: 30px;
}
</style>
